<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/c/font_4610186_rmhwhkn9el.css">
<link rel="stylesheet" type="text/css" href="bili.css/bilibili.css">
<body>
    <div id="app" class="box">
        <div class="left">
            <p class="w">扫码二维码</p>
            <div class="wz">
                <div @mouseover="handleMouseOver" @mouseout="handleMouseOut"> <img :src="tup" width="150px" height="150px" alt="Image"></div>
                <p class="dl">请使用<span>哔哩哔哩客户端</span>扫码登录或扫码下载App</p>
            </div>
        </div>
        <div class="right">
            <div class="shang">
                <div @click="qq=1"  class="mima login-option  {'active':qq===1}" >密码登录</div>
                <div @click="qq=2"  class="login-option  {'active':qq===2}">短信登录</div>
            </div>
            <div class="kk" v-if="qq===1">
                <div class="zh">
                    <div>账号</div>
                    <input placeholder="请输入账号">
                </div>
                <div class="mi">
                    <div>密码</div>
                    <input placeholder="请输入密码" type="password"><span>忘记密码?</span>
                </div>
                <div class="zcdl">
                    <div class="zc">注册</div>
                    <div class="dll">登录</div>
                </div>
            </div>
            <div class="kk" v-if="qq===2">
                <div class="zh">
                    <div>+86</div>
                    <input placeholder="请输入手机号"><span>获取验证码</span>
                </div>
                <div class="mi">
                    <div>验证码</div>
                    <input placeholder="请输入验证码">
                </div>
                <div class="zcdl">
                    <div class="zc zc1">登录/注册</div>
                </div>    
            </div>
            <div class="qtdl">
                <div class="fs">其他登录方式</div>
                <div class="qita">
                    <div class="dlfs">
                        <img src="./img/微信登录.png">
                        <span>微信登录</span>
                    </div>
                    <div class="dlfs">
                        <img src="./img/微博登录 (1).png">
                        <span>微博登录</span>
                    </div>
                    <div class="dlfs">
                        <img src="./img/支付宝登录.png">
                        <span>支付宝登录</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <p>未注册过哔哩哔哩的手机号,我们将自动帮你注册账号</p>
            <p>登录或完成注册即代表你同意 <span>用户协议</span> 和 <span>隐私政策</span></p>
        </div>
    </div>
</body>
<script src="./bili.js/vue.js"></script>
<script>
    const { createApp, ref } = Vue;
        createApp({
            setup() {
                const tup = ref('./img/屏幕截图 2024-08-16 145209.png');
                const handleMouseOver = () => {
                    tup.value = './img/1.png';
                };
                const handleMouseOut = () => {
                    tup.value = './img/屏幕截图 2024-08-16 145209.png';
                };
                let qq=ref(1)
                return {
                    tup,
                    handleMouseOver,
                    handleMouseOut,
                    qq
                };
            }
        }).mount('#app');
    </script>
</html>